<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模块管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
<script src="../../res/js/jquery-3.4.1.min.js" type="text/javascript"
	charset="utf-8"></script>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 10px;">
		<legend>模块管理</legend>
	</fieldset>
	<blockquote class="layui-elem-quote role_search">
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input id="keyword" type="text" value="" placeholder="请输入关键字"
					class="layui-input search_input">
			</div>
			 <a class="layui-btn layui-btn-normal newsAdd_btn" onclick="add()">添数据</a>
		</div>
	</blockquote>
	<div style="margin-top: -20px;">
		<table id="demo" lay-filter="test"></table>
	</div>
	<script src="../../res/layui/layui.js"></script>
	<script>
		layui.use('form', function() {
			form = layui.form;
		});
		var table2 = null;

		layui.use('table',function() {
			table = layui.table;
			//第一个实例  出现原始表格 
			table2 = table.render({
				elem : '#demo',
				height : 550,
				url : '../../../module/selectAll', //数据接口
				toolbar : '#toolbarDemo',
				id : 'testReload',
				page : true, //开启分页
				cols : [ [ //表头
						{
							field : 'tMModName',
							title : '上级模块',
							width : 190,
							sort : true,
							fixed : 'left'
						},
						{
							field : 'modName',
							title : '模块名称',
							width : 200
						},
						{
							field : 'modSite',
							title : '模块url',
							width : 200,
							sort : true
						},
						{
							field : 'modComment',
							title : '模块说明',
							width : 210,
							sort : true
						}, {
							fixed : 'right',
							width : 200,
							align : 'center',
							toolbar : '#barDemo'
						} ] ]
			});
			//监听行工具事件 // 删除但没有从数据库里 删除
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data //获得当前行数据
				, layEvent = obj.event; //获得 lay-event 对应的值
				if (layEvent === 'del') {
					layer.confirm('真的删除行么', function(index) {
						// layer.msg(data.pxID);//得到id
						var url = "../../../module/delete";
						var dataone = {
							"modId" : data.modId
						};
						$.get(url, dataone, function(one) {
							if (one.status == 1) {
								layer.msg(one.msg, {
									icon : 1,
									time : 1000
								}, function() {
									layer.close(index);//关闭层
									//parent.location.reload();//刷新主界面
                                    $(".layui-laypage-btn").click();
								});
							} else {
								layer.msg(one.msg);
							}
						}, "json");
						//obj.del(); //删除对应行（tr）的DOM结构
						//向服务端发送删除指令
					});
				} else if (layEvent === 'edit') {
					layer.open({
						type : 2,
						title : '修改页面',
						shadeClose : true,
						skin : 'layui-layer-molv', // 样式类名
						shade : 0.6,
						area : [ '440px', '500px' ],
						//offset: '90px',// 好比margin-top
						content : 'addOrUpdate.html?modId='+data.modId+''//iframe的url
					});
				}
			});
			//根据内容模糊查询
            $("#keyword").on('input propertychange',
                function() {
                    //执行重载
                    table2.reload('testReload', {
                        page : {
                            curr : 1
                            //重新从第 1 页开始
                        },
                        where : {
                            modName : $("#keyword").val()
                        }
                    }, 'data');
                });
		});
	</script>
	<script type="text/html" id="barDemo">
 		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑 </a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script type="text/javascript">
		function add() {
			//弹出层
			layer
					.open({
						type : 2,
						title : '添加页面',
						shadeClose : true,
						skin : 'layui-layer-molv', // 样式类名
						shade : 0.6,
						area : [ '440px', '500px' ],
						//offset: '90px',// 好比margin-top
						content : 'addOrUpdate.html?modId=' //iframe的url
					});
		}
		//得到地址栏上的参数  可以 是中文 
		function getQueryStringOne(key) {
			var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return decodeURI(r[2]);
			return null;
		}
	</script>
</body>
</html>